<template>
  <el-container class="container">
    <el-header class="header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#80bfff"
        text-color="#fff"
        active-text-color="#fff"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">邮件管理</template>
          <el-menu-item index="2-1"></el-menu-item>
          <el-menu-item index="2-2"></el-menu-item>
          <el-menu-item index="2-3"></el-menu-item>
        </el-submenu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">个人信息</el-menu-item>
      </el-menu>
      <div class="login-register-tbn" v-if="!loginStatus">
        <span>
          <router-link to="/login">登录</router-link>
        </span>
        <el-divider direction="vertical"></el-divider>
        <span>
          <router-link to="/register">注册</router-link>
        </span>
        <el-divider direction="vertical"></el-divider>
        <span>
          <router-link to="/register">后台中心</router-link>
        </span>
      </div>
      <div class="operation-btn" v-else>
        <el-dropdown :hide-on-click="false" class="dropdown-btn">
          <i class="el-icon-s-operation"></i>
          <el-dropdown-menu slot="dropdown" class="dropdown-menu">
            <router-link to="/epbsinfo" style="text-decoration: none"
              ><el-dropdown-item icon="el-icon-user"
                >个人信息</el-dropdown-item
              ></router-link
            >

            <el-dropdown-item icon="el-icon-switch-button"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container class="main">
      <router-view />
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "homepage",
  data() {
    return {
      activeIndex: "1",
      loginStatus: false,
    };
  },
  mounted() {
    if (this.loginStatus == 1) {
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;
  .header {
    width: 100%;
    display: flex;
    background-color: #80bfff;
    .login-register-tbn {
      height: 100%;
      width: 200px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      a {
        text-decoration: none;
        color: #fff;
      }
      a:hover {
        text-decoration: none;
        color: #409eff;
      }
    }
    .operation-btn {
      height: 100%;
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;
      .dropdown-btn {
        font-size: 20px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .main {
    width: 100%;
    height: 100%;
  }
}
</style>